<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="img/favicon.png">

    <title>Mosaic - Blog</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/color-styles.css" rel="stylesheet">
    <link href="css/ui-elements.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    
    <!-- Resources -->
    <link href="css/animate.css" rel="stylesheet">
    <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500,400italic,500italic,700italic' rel='stylesheet' type='text/css'>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body class="body-green">

    <!-- Extra Bar -->
    <div class="mini-navbar mini-navbar-dark hidden-xs">
      <div class="container">
        <div class="col-sm-12">
          <a href="#" class="first-child"><i class="fa fa-envelope"></i> Email<span class="hidden-sm">: contact@example.com</span></a>
          <span class="phone">
            <i class="fa fa-phone-square"></i> Tel.: +0 (000) 000-00-00
          </span>
          <a href="sign-up.html" class="pull-right"><i class="fa fa-arrow-circle-down"></i> Sign Up</a>
          <a href="sign-in.html" class="pull-right"><i class="fa fa-sign-in"></i> Sign In</a>
          <a href="#" class="pull-right" id="nav-search"><i class="fa fa-search"></i> Search</a>
          <a href="#" class="pull-right hidden" id="nav-search-close"><i class="fa fa-times"></i></a>
          <!-- Search Form -->
          <form class="pull-right hidden" role="search" id="nav-search-form">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search">
              <span class="input-group-btn">
                <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="navbar navbar-dark navbar-static-top" role="navigation">
      <div class="container">

        <!-- Navbar Header -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><i class="fa fa-th-large"></i> The Mosaic <span class="hidden-sm">Business Template</span></a>
        </div> <!-- / Navbar Header -->

        <!-- Navbar Links -->
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html" class="bg-hover-color">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">Pages <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="about-us.html" class="bg-hover-color">About Us</a></li>
                <li><a href="coming-soon.html" class="bg-hover-color">Coming Soon</a></li>
                <li><a href="contact-us.html" class="bg-hover-color">Contact Us</a></li>
                <li><a href="dummy.html" class="bg-hover-color">Dummy Page</a></li>
                <li><a href="help-center.html" class="bg-hover-color">Help Center</a></li>
                <li><a href="help-answer.html" class="bg-hover-color">Help Item</a></li>
                <li><a href="pricing-table.html" class="bg-hover-color">Pricing Table</a></li>
                <li><a href="responsive-video.html" class="bg-hover-color">Responsive Video</a></li>
                <li><a href="services.html" class="bg-hover-color">Services</a></li>
                <li><a href="sign-in.html" class="bg-hover-color">Sign In</a></li>
                <li><a href="sign-in-alt.html" class="bg-hover-color">Sign In Option</a></li>
                <li><a href="sign-up.html" class="bg-hover-color">Sign Up</a></li>
                <li><a href="sign-up-alt.html" class="bg-hover-color">Sign Up Option</a></li>
                <li><a href="404-error.html" class="bg-hover-color">404 Error Page</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="portfolio.html" class="bg-hover-color">Portfolio</a></li>
                <li><a href="portfolio-isotope.html" class="bg-hover-color">Portfolio Isotope</a></li>
                <li><a href="portfolio-item.html" class="bg-hover-color">Portfolio Item</a></li>
              </ul>
            </li>
            <li class="dropdown active">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">Blog <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="blog.html" class="bg-hover-color">Blog</a></li>
                <li><a href="blog-post.html" class="bg-hover-color">Blog Post</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">Shop <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="shop.html" class="bg-hover-color">Shop Index</a></li>
                <li><a href="shop-products.html" class="bg-hover-color">Shop Products</a></li>
                <li><a href="shop-item.html" class="bg-hover-color">Shop Item</a></li>
                <li><a href="shop-cart.html" class="bg-hover-color">Shopping Cart</a></li>
                <li><a href="user-profile.html" class="bg-hover-color">User Profile</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">UI Elements <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="ui-elements.html#buttons" class="bg-hover-color">Buttons</a></li>
                <li><a href="ui-elements.html#panels" class="bg-hover-color">Panels</a></li>
                <li><a href="ui-elements.html#info-boards" class="bg-hover-color">Info Boards</a></li>
                <li><a href="ui-elements.html#navs" class="bg-hover-color">Navs</a></li>
                <li><a href="ui-elements.html#headlines" class="bg-hover-color">Headlines</a></li>
              </ul>
            </li>
          </ul>

          <!-- Search Form (xs) -->
          <form class="navbar-form navbar-left visible-xs" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Go!</button>
          </form> <!-- / Search Form (xs) -->

        </div> <!-- / Navbar Links -->
      </div> <!-- / container -->
    </div> <!-- / navbar -->

    <!-- Wrapper -->
    <div class="wrapper">

      <!-- Topic Header -->
      <div class="topic">
        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <h3 class="primary-font">Our Blog</h3>
            </div>
            <div class="col-sm-8">
              <ol class="breadcrumb pull-right hidden-xs">
                <li><a href="index.html">Home</a></li>
                <li class="active">Blog</li>
              </ol>
           </div>
          </div>
        </div>
      </div>

      <div class="container">

        <div class="row blog-p">
          <div class="col-sm-9">

            <!-- Blog Post #1 -->
            <img class="author hidden-xs" src="img/photo-1.jpg" alt="...">
            <div class="blog-p-body">
              <h2 class="primary-font first-child"><a href="blog-post.html">Duis fermentum tortor at elit malesuada mollis.</a></h2>
              <hr>
              <p class="text-muted">by John Doe, January 30, 2014</p>
              <p>
                Nam ultrices, orci sit amet dignissim dignissim, tellus elit consequat dui, eu venenatis urna nisi non est. Aliquam egestas pulvinar ornare. Aenean et vulputate lacus. Ut eget purus ut ante imperdiet feugiat quis vel elit. Donec imperdiet enim quis risus porttitor congue. Vestibulum vel tristique urna. Pellentesque nulla leo, laoreet sed luctus eu, dapibus id lorem. Pellentesque eu tincidunt odio. Proin imperdiet bibendum mauris, ut bibendum odio mollis id.
              </p>
              <a href="blog-post.html" class="btn btn-lg btn-color">Read More...</a>
              <a href="blog-post.html"><img class="img-responsive" src="img/general-3.jpg" alt="..."></a>
            </div>

            <!-- Blog Post #2 -->
            <img class="author hidden-xs" src="img/photo-2.jpg" alt="...">
            <div class="blog-p-body">
              <h2 class="primary-font"><a href="blog-post.html">Aliquam placerat ligula nec augue sollicitudin porta.</a></h2>
              <hr>
              <p class="text-muted">by John Doe, February 03, 2014</p>
              <p>
                Nam ultrices, orci sit amet dignissim dignissim, tellus elit consequat dui, eu venenatis urna nisi non est. Aliquam egestas pulvinar ornare. Aenean et vulputate lacus. Ut eget purus ut ante imperdiet feugiat quis vel elit. Donec imperdiet enim quis risus porttitor congue. Vestibulum vel tristique urna. Pellentesque nulla leo, laoreet sed luctus eu, dapibus id lorem. Pellentesque eu tincidunt odio. Proin imperdiet bibendum mauris, ut bibendum odio mollis id.
              </p>
              <a href="blog-post.html" class="btn btn-lg btn-color">Read More...</a>
              <a href="blog-post.html"><img class="img-responsive" src="img/general-1.jpg" alt="..."></a>
            </div>

            <!-- Paggination -->
            <ul class="pagination pull-right">
              <li class="disabled"><a href="#">«</a></li>
              <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#">»</a></li>
            </ul>
            <div class="clearfix"></div>

          </div>
          <div class="col-sm-3">
            <!-- Search Form -->
            <div class="blog-p-search">
              <form class="form" role="form">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search our blog">
                  <span class="input-group-btn">
                    <button class="btn btn-color" type="button">Go!</button>
                  </span>
                </div>
              </form>
            </div>

            <!-- Social Links -->
            <h4 class="primary-font">
              Stay Tuned
            </h4>
            <ul class="blog-p-social">
              <li><a href="#"><i class="fa fa-rss"></i> RSS Feed</a></li>
              <li><a href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
              <li><a href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
            </ul>

            <!-- Most Popular -->
            <h4 class="primary-font">
              Most Popular
            </h4>
            <ul class="blog-p-popular">
              <li><a href="blog-post.html">Pellentesque consectetur lectus.</a></li>
              <li><a href="blog-post.html">Aliquam placerat ligula nec augue sollicitudin porta.</a></li>
              <li><a href="blog-post.html">Pellentesque vel sem quis augue ultricies.</a></li>
              <li><a href="blog-post.html">Proin in justo et risus dictum consectetur quis quis orci.</a></li>
            </ul>

          </div>
        </div> <!-- / .row -->

      </div> <!-- / .container -->

    </div> <!-- / .wrapper -->

    <!-- Footer -->
    <footer class="footer-dark">
      <div class="container">
        <div class="row">
          <!-- Contact Us -->
          <div class="col-sm-4">
            <h3 class="text-color"><span class="border-color">Contact Us</span></h3>
            <div class="content">
              <p>
              San Francisco, CA 94101<br />
              1987 Lincoln Street<br />
              Phone: +0 000 000 00 00<br />
              Fax: +0 000 000 00 00<br />
              Email: <a href="#">admin@mysite.com</a>
              </p>
            </div>
          </div>
          <!-- Social icons -->
          <div class="col-sm-4">
            <h3 class="text-color"><span>Go Social</span></h3>
            <div class="content social">
              <p>Stay in touch with us:</p>
              <ul class="list-inline">
                  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#" class="pinterest"><i class="fa fa-pinterest"></i></a></li>
                <li><a href="#" class="github"><i class="fa fa-github"></i></a></li>
                <li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="#" class="vk"><i class="fa fa-vk"></i></a></li>
                <li><a href="#" class="plus"><i class="fa fa-google-plus"></i></a></li>
              </ul>
              <div class="clearfix"></div>
            </div>
          </div>
          <!-- Subscribe -->
          <div class="col-sm-4">
            <h3 class="text-color"><span>Subscribe</span></h3>
            <div class="content">
              <p>Enter your e-mail below to subscribe to our free newsletter.<br />We promise not to bother you often!</p>
              <form class="form" role="form">
                <div class="row">
                  <div class="col-sm-8">
                    <div class="input-group">
                      <label class="sr-only" for="subscribe-email">Email address</label>
                      <input type="email" class="form-control" id="subscribe-email" placeholder="Enter email">
                      <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">OK</button>
                      </span>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12">
            <hr>
          </div>
        </div>
        <!-- Copyrights -->
        <div class="row">
          <div class="col-sm-12">
            <p>&copy; Mosaic 2014. <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
          </div>
        </div>
      </div>
    </footer>

    <!-- Style Toggle -->
    <div class="style-toggle text-left hidden-xs">
      <i class="fa fa-gears style-toggle-btn"></i>
      <div class="style-toggle-header text-center">
        Navbar Type
      </div>
      <!-- Navbar Type -->
      <div class="style-toggle-body text-left">
        <div class="radio">
          <label>
            <input type="radio" name="navbar" id="opt-navbar-dark" value="opt-navbar-dark" checked>
            Navbar Dark (default)
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="navbar" id="opt-navbar-white" value="opt-navbar-white">
            Navbar White
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="navbar" id="opt-navbar-mixed" value="opt-navbar-mixed">
            Navbar Mixed
          </label>
        </div>
      </div>
      <!-- Color Styles-->
      <div class="style-toggle-header text-center">
        Color Styles
      </div>
      <div class="style-toggle-body text-center">
        <ul class="colors list-inline">
          <li class="green"></li>
          <li class="blue"></li>
          <li class="orange"></li>
          <li class="red"></li>
        </ul>
      </div>
      <!-- Footer Type -->
      <div class="style-toggle-header text-center">
        Footer Type
      </div>
      <div class="style-toggle-body text-left">
        <div class="radio">
          <label>
            <input type="radio" name="footer" id="opt-footer-dark" value="opt-footer-dark" checked>
            Footer Dark (default)
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="footer" id="opt-footer-white" value="opt-footer-white">
            Footer White
          </label>
        </div>
        <hr>
        <a href="theme-faq.html"><i class="fa fa-question-circle"></i> Using color schemes on a production site.</a>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scrolltopcontrol.js"></script>
    <script src="js/jquery.sticky.js"></script>
    <script src="js/custom.js"></script>

</body></html>